<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>南陈航空（软件工程作业）</title>
    <link rel="icon" href="favicon.png" type="image/png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../lib/bootstrap.min.css">
    <link rel="stylesheet" href="../stylesheets/dashboard.css">
    <link rel="stylesheet" href="../stylesheets/air.css">
</head>
<body>
<div id="vue_div">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">导航条</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#" @click="r_index">南陈航空公司（软件工程作业）</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false">{{me.name}}  <span class="badge">0</span> <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <template v-if="me.val==='guest'" >
                                <li><a href="#">登陆</a></li>
                                <li><a href="#">注册</a></li>
                            </template>
                            <template v-if="me.val==='user'" >
                                <li><a href="#">特价机票<span class="glyphicon glyphicon-fire"></span></a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">航空日历</a></li>
                                <li><a href="#">退税中心</a></li>
                                <li><a href="#">系统消息</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#" @click="logout">退出登录</a></li>
                            </template>
                            <template v-if="me.val==='master'" >
                                <li><a href="#">综合查询</a></li>
                                <li><a href="#">信息中心</a></li>
                                <li><a href="#">用户管理</a></li>
                                <li><a href="#">客服中心</a></li>
                                <li><a href="#">系统消息</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="#" @click="logout">退出登录</a></li>
                            </template>

                        </ul>
                    </li>
                    <li><a href="#" @click="r_goto(11)">在线营业厅</a></li>
                    <li><a href="#" @click="r_goto(12)">出行指南</a></li>
                    <li><a href="#" @click="r_goto(13)">联系客服</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="查询...">
                </form>
            </div>
        </div>
    </nav>
    <div class="container-fluid">
        <div class="row placeholders ">
            <div v-show="me.val==='guest'" style="display: none">
                <div class="col-sm-4 col-sm-offset-2">
                    <br><br><br><br><br><br>
                    <button class="circle02" data-toggle="modal" data-target="#myModal" @click="sel(1)"><h1>客户登陆</h1></button>
                </div>
                <div class="col-sm-4">
                    <br><br><br><br><br><br>
                    <button class="circle02" data-toggle="modal" data-target="#myModal" @click="sel(2)"><h1>职员登陆</h1></button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">登陆窗口</h4>
                </div>
                <div class="modal-body">
                    <form class="form">
                        <br><br>
                        <input type="text" id="username" placeholder="Username">
                        <input type="password" placeholder="Password">
                        <br><br>
                    </form>
                </div>

                <div class="modal-footer" >
                    <button type="button" class="btn btn-default" data-dismiss="modal" >取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" @click="login">登陆</button>
                </div>

            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../lib/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib/vue.min.js"></script>
<script>
    new Vue({
        el:'#vue_div',
        data:{
            me:{
                name:'游客',
                val:'guest',
                tem_val:'',
            },
            page:{
                name:'index',
                val:1,

            },
            money:0,
        },
        methods:{
            sel:function(num){
                switch (num){
                    case 1:
                        this.me.tem_val='user';
                        break;
                    case 2:
                        this.me.tem_val='master';
                        break;


                }
            },
            login:function(){
                this.me.val=this.me.tem_val;
                this.me.name=$('#username').val();
                this.page.name='index';
            },
            logout:function(){
                this.me.val='guest';
                this.me.name='游客';
            },
            r_index:function(){
                this.page.name='index';
                $("#b_0").addClass("active");
                this.page.val=1;
                for(var i=1;i<=10;i++){
                    var item="#b_"+i;
                    $(item).removeClass("active");
                }
            },
            r_goto:function(num){
                this.page.name="page"+num;

//                for(var i=0;i<=10;i++){
//                    if(i==num) {
//                        var item="#b_"+i;
//                        $(item).addClass("active");
//                        continue;
//                    }
//                    $("#b_"+i).removeClass("active");
//                }
            },
        }
    })
</script>
</body>
</html>